<template>
    <div class="dhzn_goodsvimg">
        <!-- 查询 -->
        <div class="d_v-c-query mb10">
            <el-form :model="selectquery" label-width="72px" ref="selectquery" inline size='mini' class="d_vcq-form">
                <el-form-item label="查询类型" prop='anonymous'>

                    <el-select v-model="selectquery.anonymous" clearable>
                        <el-option label="所有图片" value="null"></el-option>
                        <el-option v-for="(item,key) in filtercontent" :key="key" :label="item.text" :value="item.id"></el-option>
                    </el-select>

                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="goodsActivity(),currentPage=1,pageingstate=1">查询</el-button>
                    <el-button type="danger" @click="abolish('selectquery'),currentPage=1,goodsActivity(),pageingstate=0">取消</el-button>
                </el-form-item>
            </el-form>
        </div>

        <!-- 数据列表 -->
        <div class="d_v-c-list f14">
            <!-- 数据表 -->
            <table class="d_vcl-tabel tc">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>评价图片</th>
                        <th>评价内容</th>
                        <!-- <th>操作</th> -->
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item,key) in basiclist" :key="key">
                        <td>{{item.id}}</td>
                        <!-- 图片的预览 -->
                        <td class="f0 pt5 pb5">
                            <el-popover placement="top" popper-class="d_gld-t-popover" trigger="click" v-model="item.visible">
                                <img :src="item.imageurl">
                                <img slot="reference" :src="item.imageurl">
                            </el-popover>
                        </td>
                        <td>{{item.evaluateid | filcontent}}</td>
                    </tr>
                </tbody>
            </table>

            <div class="d_rj-block mt20">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-size="pagesize"
                    layout="total, prev, pager, next, jumper"
                    :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
let axios = require('axios')
let that
import {formatDate} from '../../js/time.js'
export default {
    components: {},
    data() {
        return {
            id: '',                             //路由传值
            token: '',                          //身份验证
            pageingstate: 0,                    //页面切换分页运行函数的状态管理
            goodsname: '',
            basiclist: [],
            // 查询条件绑定对象
            selectquery: {
                anonymous: 'null',
            },
            filtercontent: [],
            currentPage: 1,						//分页的默认页数
            pagesize: 10,                       //单页条数
            total: 0,						   //总条数
        };
    },
    filters:{
        filcontent(type){
            that.filtercontent.forEach((item)=>{
                type===item.id ? type = item.text : '';
            })
            return type
        },
    },
    computed: {},
    watch: {},
    methods: {
        // 单页条数
        handleSizeChange(val) {
            // console.log(`每页: ${val}条数据`);
            let that = this;
            that.pagesize = val;
            that.goodsActivity()
        },

        //分页的跳页函数
        handleCurrentChange(val) {
            // console.log(`当前页: ${val}`);
            let that = this;
            that.currentPage = val;
            that.goodsActivity()
        },

        // 删除评价图片
        requestdelete(id,key){
            let that = this;
            let updata = JSON.stringify({id: id});
            that.$confirm('此操作将永久删除该文件, 是否继续?', '提示',{
                confirmButtonText:'确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
            }).then(()=>{
                axios({
                    method: 'post',
                    url: '/api/goodsEvaluateImage/delete',
                    headers: {
                        'Content-Type': 'application/json',
                        'authorization': `Bearer ${JSON.parse(sessionStorage.getItem('token'))}`
                    },
                    data: updata
                }).then( resp=> {
                    console.log(resp)
                    if(resp.data.data === '删除成功！'){
                        that.basiclist.splice(key,1);
                        that.total--
                    }
                }).catch( err=> {console.log(err)})

                this.$message({
                    type: 'success',
                    message: '删除成功'
                })
            }).catch(()=>{
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })
            })
        },

        // 评价图片
        goodsActivity(){
            let that = this;
            let data = {current: that.currentPage,size:that.pagesize,goodsid:that.id};
            that.selectquery.anonymous !== null ? data.anonymous = that.selectquery.anonymous : '';
            let updata = JSON.stringify(data);
            axios({    
                method: 'post',
                url: '/api/goodsEvaluateImage/list',
                headers: {
                    'Content-Type': 'application/json',
                    'authorization': `Bearer ${JSON.parse(sessionStorage.getItem('token'))}`
                },
                data: updata
            }).then( resp=> { 
                console.log("评价图片",resp)
                that.basiclist = resp.data.data;
                that.total = resp.data.code;
                if(that.pageingstate === 1){
                    resp.data.code !== 0 ? (
                        this.$message({
                            message: '为您找到'+resp.data.code+'条订单',
                            type: 'success'
                        })
                    ) : (this.$message('没有符合条件的订单'))
                    
                }
            }).catch( err=>{console.log(err)})
        },

        // 评价过滤用
        requestevaluate(){
            axios({    
                method: 'post',
                url: '/api/goodsEvaluate/list',
                headers: {
                    'Content-Type': 'application/json',
                    'authorization': `Bearer ${JSON.parse(sessionStorage.getItem('token'))}`
                },
                data: JSON.stringify({current:1,size:100000000})
            }).then( resp=> {
                that.filtercontent = resp.data.data.map((item)=>{
                    return{
                        id: item['id'],
                        text: item['content']
                    }
                })
                console.log(that.filtercontent)
            }).catch( err=>{console.log(err)})
        },

        // 取消查询
        abolish(query){
            this.$refs[query].resetFields()
        },

        //拿token
        newtoken(){
            let that = this;
            let axios = require('axios')
			let loguser = JSON.parse(sessionStorage.getItem('updata'))
			let data = {username:loguser.username, password:loguser.password};
			let updata = JSON.stringify(data);
			axios({
				method: 'post',
				url: '/api/getAuthority/manager',
				headers: { 'Content-Type': 'application/json' },
				data: updata
			})
			.then( resp=> {
                that.token = resp.data.data;
                sessionStorage.setItem("token", JSON.stringify(resp.data.data))
                that.requestevaluate()
                // that.goodsActivity()
                setTimeout(()=>{
                    that.goodsActivity()
                },300)
			}).catch( err=> {})
        }
    },
    created() {},
    mounted() {
        let that = this;
        that.id = that.$route.params.aid;
        that.newtoken()
    },
    beforeCreate() {
        that = this;
    },
    beforeMount() {},
    beforeUpdate() {},
    updated() {},
    beforeDestroy() {},
    destroyed() {},
    activated() {},
    }
</script>
<style scoped>
.dhzn_goodsvimg{
    height: calc(100% - 51px);
}
/* 内容查询、列表和分页 */
.d_v-content{
    height: 100%;
}
/* 查询 */
.d_v-c-query{
    display: flex;
    justify-content: space-between;
}
.d_vcq-form .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item{
    margin: 0;
}
/* 表单 */
.d_v-c-list{
    display: flex;
    flex-wrap: wrap;
    height: calc(100% - 47px);
}
.d_vcl-tabel{
    width: 100%;
    color: #666666;
    border-collapse: collapse;
    border-top: 1px solid #e0e0e0;
    border-right: 1px solid #e0e0e0;
}
.d_vcl-tabel thead tr, .d_vcl-tabel tbody tr:hover{
    background-color: #F2F2F2;
}
.d_vcl-tabel tr th,.d_vcl-tabel tr td{
    height: 50px;
    border-bottom: 1px solid #e0e0e0;
    border-left: 1px solid #e0e0e0;
}
.d_vcl-tabel tr td img{
    max-width: 120px;
    max-height: 80px;
}
.d_rj-block{
    margin-top: auto;
}
/* 弹出层 */
.d_vc-dialog{
    display: flex;
}
</style>